<% layout('/layouts/default.html', {title: '', libs: ['dataGrid']}){ %>
<!-- <link rel="stylesheet" href="${ctxStatic}/modules/sys/sysDesktop.css?${_version}"> -->
<style>
	.bindOne {
		border-radius: 4px;
		margin: 0px 0px 10px 10px;
		height: 260px;
		text-align: center;
		background: #fff;
		-webkit-transition: -webkit-transform .3s;
		transition: -webkit-transform .3s;
		transition: transform .3s;
		transition: transform .3s, -webkit-transform .3s;
		padding: 0 10px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.BoxTitAll {
		display: -webkit-box;
		display: -ms-flexbox;
		/*display: flex;*/
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		height: 54px;
		line-height: 54px;
	}

	.tabBody {
		list-style: none;
		padding: 0px
	}

	.tabBody li {
		display: inline-block;
		margin: 0px 10px;
		font-size: 15px;
	}

	.tabActive {
		color: #1F69E6;
		/*border-bottom: 2px solid #1F69E6;*/
	}

	.defaultColor_text {
		font-size: 16px;
		font-weight: 700;
		margin: 0 5px;
		color: #1F69E6;
		line-height: 54px;
	}

	.hand {
		cursor: pointer;
	}

	/*修改col-md-6的padding值*/
	.col-md-6 {
		padding: 5px 10px 5px 2px !important;
	}

	.wrapper {
		overflow-x: hidden;
		overflow-y: hidden;
	}

	.jqgridborder{
		border-bottom: 1px dashed #CCC !important;
	}

	.ui-jqgrid .ui-priority-secondary{
		background: white !important;
	}

	.ui-row-ltr{
		border: 0px !important;
	}

	#gview_noticedataGrid .ui-jqgrid-hbox{
		display: none;
	}

	#gbox_noticedataGrid{
		border: none;
	}

	#noticedataGrid tr td{
		border: none;
	}

	#noticedataGrid tr td{
		border-bottom: 1px dashed #CCC;
	}

	.jqgfirstrow td{
		border-bottom: none !important;
	}

	#noticedataGrid tr:hover{
		cursor: pointer;
		text-decoration:underline;
		color: rgb(31, 105, 230);
	}

	#taskAlertInformationDataGrid {
		cursor: pointer
	}

	#noInformationDataGrid tr:hover{
		cursor: pointer;
	}

	#InformationDataGrid tr:hover{
		cursor: pointer;
	}

</style>
<div class="content pb0">
	<div class="row">

		<div class="col-md-6">
			<div class="bindOne">
				<div class="BoxTitAll">
					<h1 class="defaultColor_text">任务进展</h1>
				</div>
				<div class="handTable" id="taskProgress" style="height:80%;width: 100%">

				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="bindOne">
				<div class="BoxTitAll">
					<ul class="tabBody ">
						<li class="tab-item tabActive hand">待办</li>
						<li class="tab-item hand">已办</li>
					</ul>
					<div>
                        <span class="moreColor">
                            <a href="#" id="linkToMsgList" onclick="unreadMsg()"><i class="icon-options"></i></a>
                        </span>
					</div>
				</div>
				<div class="tab-content fen1">
					<div class="handTable">
						<table id="noInformationDataGrid"></table>
					</div>
					<div class="handTable">
						<table id="InformationDataGrid"></table>
					</div>
				</div>
			</div>
		</div>


		<div class="col-md-6">
			<div class="bindOne">
				<div class="BoxTitAll">
					<h1 class="defaultColor_text">逾期未反馈通报</h1>
					<div>
                        <span class="moreColor">
                            <a href="#" onclick="goOverdueDetail()"><i class="icon-options" ></i></a>
                        </span>
					</div>
				</div>
				<div class="handTable" id="overdueFeedback" style="height:75%;width: 100%">

				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="bindOne">
				<div class="BoxTitAll">
					<h1 class="defaultColor_text">进度滞后通报</h1>
					<div>
                        <span class="moreColor">
                           <a href="#" onclick="goOverdueDetail()"><i class="icon-options" ></i></a>
                        </span>
					</div>
				</div>
				<div class="handTable" id="progressLagNotification" style="height:75%;width: 100%">

				</div>
			</div>
		</div>
	</div>


</div>

<% } %>
<script src="${ctxStatic}/jquery/jquery-ui-sortable-1.12.1.min.js"></script>
<script src="${ctxStatic}/echarts/4.2/echarts.min.js"></script>
<script>
	let taskProgressEcharts;
	let overdueFeedback;
	let progressLagNotification;
	var max = function(arr) {
		var maxNum = parseInt((Math.max.apply(null, arr)) / 3)

		return maxNum

	}
	//任务进展图表
	$.ajax({
		type: 'get',
		url: "${ctx}/home/supIndex/queryTwo",
		success: function (res) {
			let twoListName = res.nameList
			let twoList = res.list

			taskProgressEcharts = echarts.init(document.getElementById('taskProgress'), 'default');
			taskProgressEcharts.on('legendselectchanged', function (params) {
				taskProgressEcharts.setOption({
					legend: { selected: { [params.name]: true } },
				});
				js.addTabPage( null,'任务进展', '${ctx}/home/supIndex/supIndexTwoDetail?name='+params.name, true, true);
			})
			taskProgressEcharts.setOption({
				tooltip: {
					trigger: 'item'
				},
				grid: {
					top:'5%',
					left: '3%',
					right: '0%',
					bottom: '5%',
					containLabel: true
				},
				legend: {
					orient: 'vertical',
					data: twoListName,
					y: 'center',
					right: '0%',
					itemWidth: 45,
					itemHeight: 20,
					itemGap: 15,
					textStyle: {
						fontSize: 14,
						color: "rgba(23, 22, 22, 1)"
					},
					formatter: function (name) {
						let tarValue;
						for (let i = 0, l = twoList.length; i < l; i++) {
							if (twoList[i].name == name) {
								tarValue = twoList[i].value;
							}
						}

						return name + "：" + tarValue;
					}
				},
				series: [
					{
						type: 'pie',
						radius: ['40%', '60%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center'
						},
						itemStyle: {
							normal: {
								color: function (params) {
									var colorList = [
										'#4b87ff',
										'#FF0000',
										'#1abd6e',
										'#800080',
										'#ff8b19'
									];
									return colorList[params.dataIndex]
								},
							}
						},
						label: {
							show: false,
							position: 'center'
						},

						labelLine: {
							show: false
						},
						data: twoList
					}
				]
			})
		}
	});

	//逾期未反馈通报
	$.ajax({
		type: 'get',
		url: "${ctx}/home/supIndex/queryFive",
		success: function (res) {
			let fiveListName = res.nameList
			let fiveListValue = res.valueList
			overdueFeedback = echarts.init(document.getElementById('overdueFeedback'), 'default');
			overdueFeedback.on('click', function (params) {
				js.addTabPage( null,'逾期未反馈事项', '${ctx}/home/supIndex/supIndexFive?leaderOrgCode='+res.list[params.dataIndex].nameId, true, true);
			})
			let six=fiveListName.length
			let num=0
			if (six>3){
				num=20
			}else {
				num=100
			}
			let maxNum= Math.max.apply(null,fiveListValue)

			overdueFeedback.setOption({
				color: ['#ff8b19'],
				tooltip: {
					trigger: 'axis',
					formatter: "{b0}<br /> 逾期未反馈数量：{c0}"
				},
				xAxis: {
					type: 'value',
					data: fiveListName,
					axisLabel: {
						interval: 0 , //设置间隔为0
						length:100,
					},
					splitLine: { show: false },
					axisLine: {
						show: true
					}
				},

				grid: {
					top:'5%',
					left: '3%',
					right: '4%',
					bottom: '15%',
					containLabel: true,
				},

				yAxis: {
					inverse: true, // 倒叙
					type: 'category',
					interval:max(fiveListValue)==0?1:max(fiveListValue), // 步长
					min:0, // 起始
				},
				series: [{
					data: fiveListValue,
					type: 'bar',

					itemStyle: {
						normal: {
							color: '#ff8b19',
						}
					},
					barWidth: 20
				}]
			})
		}
	});

	//进度滞后通报
	$.ajax({
		type: 'get',
		url: "${ctx}/home/supIndex/querySix",
		success: function (res) {
			let sixListName = res.nameList
			let sixListValue = res.valueList
			progressLagNotification = echarts.init(document.getElementById('progressLagNotification'), 'default');
			progressLagNotification.on('click', function (params) {
				js.addTabPage( null,'进度滞后通报', '${ctx}/home/supIndex/supIndexSix?leaderOrgCode='+res.list[params.dataIndex].nameId, true, true);
			})
			let six=sixListName.length
			let num=0
			if (six>3){
				num=20
			}else {
				num=100
			}



			progressLagNotification.setOption({
				color: ['#ff4d4d'],
				tooltip: {
					trigger: 'axis',
					formatter: "{b0}<br /> 进度滞后：{c0}次"
				},
				xAxis: {
					type: 'category',
					data: sixListName,
					axisLabel: {
						interval: 0 , //设置间隔为0
						length:100,
					}
				},
				grid: {
					top: '5%',
					left: '3%',
					right: '4%',
					bottom: '15%',
					containLabel: true
				},
				// dataZoom: [
				//     {
				//         id: "dataZoomX",
				//         type: "slider",
				//         // show:false,
				//         height: 20,
				//         start: 0, //数据窗口范围的起始百分比0-100
				//         end: num, //数据窗口范围的结束百分比0-100
				//         xAxisIndex: [0],
				//         filterMode: "filter",
				//         realtime: true,
				//         bottom: 0,
				//         textStyle: {
				//             color: "#e7e7eb",
				//         },
				//
				//     },
				//     //2.在内部可以横向拖动
				//     {
				//         type: "inside", // 内置于坐标系中
				//         start: 0,
				//         end: 30,
				//         xAxisIndex: [0],
				//     },
				// ],
				yAxis: {
					type: 'value',
					interval: max(sixListValue)==0?1:max(sixListValue), // 步长
					min: 0, // 起始

					// axisLabel :{
					//     interval:0
					// },

				},
				series: [{
					data: sixListValue,
					type: 'bar',
					itemStyle: {
						normal: {
							color: '#ff4d4d',
						}
					},
					barWidth: 40
				}]
			})
		}
	});

	$(function () {
		$(window).resize(function () {
			//     var footerHeight = $('.main-footer').outerHeight() || 0;
			//     var windowHeight = $(window).height();
			//     $('.content').css('min-height', windowHeight - footerHeight);
			//     taskProgressEcharts.resize()
			//     overdueFeedback.resize()
			//     progressLagNotification.resize()
			// }).resize();
			// $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
			//     $(window).resize();

			taskProgressEcharts.resize()
			progressLagNotification.resize()
			overdueFeedback.resize()

		});

		// $('.ui-sortable').sortable({
		//     connectWith: '.ui-sortable',
		//     handle: '.box-header, .nav-tabs',
		//     placeholder: 'sort-highlight',
		//     forcePlaceholderSize: true,
		//     zIndex: 999999
		// }).find('.box-header, .nav-tabs').css('cursor', 'move');

		//    待办已办切换
		$(".fen1>div").eq(1).hide();
		$(".tabBody li").click(function () {
			var index = $(this).index();
			$(this).siblings().removeClass("tabActive");
			$(this).addClass("tabActive");
			$(".fen1>div")
					.eq(index)
					.show()
					.siblings()
					.hide();

			if (index == 0) {
				$("#linkToMsgList").attr("onclick", "unreadMsg()")
			} else {
				$("#linkToMsgList").attr("onclick", "readMsg()")
			}

		})
	});
	//任务预警信息
	$('#taskAlertInformationDataGrid').dataGrid({
		autoGridHeight: function () {
			return $('.ui-layout-center').parent().height() - $('#dataGridPage').height() - 100
		},
		url: "${ctx}/home/supIndex/queryThree?limit=1",
		sortableColumn: false, // 列表不允许排序
		autoGridHeight: false,   // 自动表格高度（设置为false后，不自动调整表格高度）为函数时返回'100%',则自动高度。
		autoGridHeightFix: 0,   // 自动表格高度宽度（自动调整高度时修正的高度值）
		autoGridWidth: true,    // 自动表格宽度（设置为false后，不自动调整表格宽度）
		autoGridWidthFix: 0,    // 自动表格修复宽度（自动调整宽度时修正的宽度值）
		emptyDataHint: true, 	// 表格内没有数据的时候是否提示 “无数据显示”  v4.1.7
		emptyDataHintContent: '<center>' + $.jgrid.defaults.emptyrecords + '</center>',
		columnModel: [
			{header: '${text("主键")}', name: 'taskId', index: 'a.taskId', width: 150, align: "left", hidden: true},
			{header:'${text("action主键")}', name:'id', width:150, align:"left", hidden:true},
			{header: '${text("任务标题")}', name: 'taskTitle', index: 'a.task_title', width: 150, align: "left"},
			/*
                        {header: '${text("任务类型")}', name: 'taskTypeName', index: 'a.task_type_code', width: 150, align: "left"},
            */
			{header: '${text("任务内容")}', name: 'taskContent', index: 'a.task_content', width: 150, align: "left"},
			{ header: '${text("逾期情况")}', name: 'feedbackCount', index: 'a.feedback_count', width: 150, align: "center",formatter: function(val, obj, row, act){
					return '<span  style="color: #ff8b19">'+'逾期未反馈&nbsp;'+row.feedbackCount+'&nbsp;次'+'</span>';
				},
			}
			// ,{header:'${text("操作")}', name:'actions', width:100,align:"center", formatter: function(val, obj, row, act){
			//         var actions = [];
			//         actions.push('<a href="${ctx}/audit/taskReceive/taskReceiveOne?id='+row.id+'" class="btn btn-primary btn-xs btnList" title="${text("催办")}" ><span>催办</span></a>&nbsp;');
			//         return actions.join('');
			//     }}
		],
		// 加载成功后执行事件
		ajaxSuccess: function (data) {

		},
		onSelectRow: function (id, isSelect, event) {
			let obj = $('#taskAlertInformationDataGrid').dataGrid('getRowData', id);
			js.addTabPage(null, "任务详情", "${ctx}/audit/taskReceive/taskReceiveFive?isNewRecord=false&id=" + obj.id + "&taskId=" + obj.taskId, true,true);
		}
	});

	//待办
	$('#noInformationDataGrid').dataGrid({
		autoGridHeight: function () {
			return $('.ui-layout-center').parent().height() - $('#dataGridPage').height() - 100
		},
		url: "${ctx}/msg/listData",
		sortableColumn: false, // 列表不允许排序
		autoGridHeight: false,   // 自动表格高度（设置为false后，不自动调整表格高度）为函数时返回'100%',则自动高度。
		autoGridHeightFix: 0,   // 自动表格高度宽度（自动调整高度时修正的高度值）
		autoGridWidth: true,    // 自动表格宽度（设置为false后，不自动调整表格宽度）
		autoGridWidthFix: 0,    // 自动表格修复宽度（自动调整宽度时修正的宽度值）
		emptyDataHint: true, 	// 表格内没有数据的时候是否提示 “无数据显示”  v4.1.7
		emptyDataHintContent: '<center>' + $.jgrid.defaults.emptyrecords + '</center>',
		columnModel: [
			{header: '${text("主键")}', name: 'id', index: 'a.id', width: 150, align: "left", hidden: true},
			{header: '${text("消息内容")}', name: 'msgContentEntity.content', index: 'a.msg_content', width: 150, align: "left"},
			{header: '${text("发送时间")}', name: 'sendDate', index: 'a.send_date', width: 150, align: "left"},
			{header: '${text("发送者")}', name: 'sendUserName', index: 'a.send_user_name', width: 150, align: "left"},
		],
		// 加载成功后执行事件
		ajaxSuccess: function (data) {

		},
		onSelectRow: function (id, isSelect, event) {
			let obj = $('#noInformationDataGrid').dataGrid('getRowData', id);
			js.addTabPage(null, "查看消息", "${ctx}/msg/readMsg?id="+ obj.id, true,true);
		}
	});

	//已办
	$('#InformationDataGrid').dataGrid({
		url: "${ctx}/msg/listData?pushed=true",
		sortableColumn: false, // 列表不允许排序
		autoGridHeight: false,   // 自动表格高度（设置为false后，不自动调整表格高度）为函数时返回'100%',则自动高度。
		autoGridHeightFix: 0,   // 自动表格高度宽度（自动调整高度时修正的高度值）
		autoGridWidth: true,    // 自动表格宽度（设置为false后，不自动调整表格宽度）
		autoGridWidthFix: 0,    // 自动表格修复宽度（自动调整宽度时修正的宽度值）
		emptyDataHint: true, 	// 表格内没有数据的时候是否提示 “无数据显示”  v4.1.7
		emptyDataHintContent: '<center>' + $.jgrid.defaults.emptyrecords + '</center>',
		columnModel: [
			{header: '${text("主键")}', name: 'id', index: 'a.id', width: 150, align: "left", hidden: true},
			{header: '${text("消息内容")}', name: 'msgContentEntity.content', index: 'a.msg_content', width: 150, align: "left"},
			{header: '${text("发送时间")}', name: 'sendDate', index: 'a.send_date', width: 150, align: "left"},
			{header: '${text("发送者")}', name: 'sendUserName', index: 'a.send_user_name', width: 150, align: "left"},
		],
		// 加载成功后执行事件
		ajaxSuccess: function (data) {

		},
		onSelectRow: function (id, isSelect, event) {
			let obj = $('#InformationDataGrid').dataGrid('getRowData', id);
			js.addTabPage(null, "查看消息", "${ctx}/msg/readMsg?id="+ obj.id, true,true);
		}
	});

	//通知公告
	$("#noticedataGrid").dataGrid({
		url: "${ctx}/msg/msgInner/listData",
		sortableColumn: false, // 列表不允许排序
		altRows: false,
		showRownum: false,
		autoGridHeight: false,   // 自动表格高度（设置为false后，不自动调整表格高度）为函数时返回'100%',则自动高度。
		autoGridHeightFix: 0,   // 自动表格高度宽度（自动调整高度时修正的高度值）
		autoGridWidth: true,    // 自动表格宽度（设置为false后，不自动调整表格宽度）
		autoGridWidthFix: 0,    // 自动表格修复宽度（自动调整宽度时修正的宽度值）
		emptyDataHint: true, 	// 表格内没有数据的时候是否提示 “无数据显示”  v4.1.7
		emptyDataHintContent: '<center>' + $.jgrid.defaults.emptyrecords + '</center>',
		columnModel: [
			{header: '${text("主键")}', name: 'id', index: 'a.id', width: 150, align: "left", hidden: true},
			{header: '${text("公告标题")}', name: 'msgTitle', index: 'a.msg_title', width: 150, align: "left"},
			{header: '${text("时间")}', name: 'sendDate', index: 'a.send_date', width: 150, align: "center"},
		],
		// 加载成功后执行事件
		ajaxSuccess: function (data) {

		},
		complete: function () {

		},
		onSelectRow: function (id, isSelect, event) {
			let obj = $('#noticedataGrid').dataGrid('getRowData', id);
			js.addTabPage(null, "查看消息", "${ctx}/msg/msgInner/view?id="+ obj.id, true,true);
		}
	});

	//打开站内消息
	function msg() {
		js.addTabPage(null, "站内消息", "${ctx}/msg/msgInner/list", true,true)
	}

	//打开未读消息
	function unreadMsg() {
		js.addTabPage(null, "未读消息", "${ctx}/msg/list", true,true)
	}

	//打开已读消息
	function readMsg() {
		js.addTabPage(null, "已读消息", "${ctx}/msg/list?pushed=true", true,true)
	}
	function goOverdueDetail(){
		js.addTabPage(null, "逾期未反馈", "${ctx}/home/supIndex/supIndexFiveDetail", true,true)
	}
	//打开任务逾期信息
	function renwuyuqi() {
		js.addTabPage(null, "任务逾期信息", "${ctx}/home/supIndex/supIndexThreeDetail", true,true)
	}
</script>